import './index.scss';
import navTpl from "./tpl/nav.tpl";
import navItemTpl from './tpl/nav_item.tpl';
import { NavMenu } from './nav_menu/'
import tools from '../../../utils/tools';

class Nav{
    constructor(){
        this.name = "nav";
        this.navMenu = new NavMenu();
        this.htmlCache={};
    }
     tpl(data){
         var list ="";
         data.forEach((item)=>{
             list +=tools.tplReplace(navItemTpl(),{
                 field:item.field,
                 seriesName:item.series_name
             });
         });

       return tools.tplReplace(navTpl(),{
            navItems:list,
            navMenu:this.navMenu.tpl()
         });
           
     }
     navMouseIn(e){
       const data = e.data,
             phoneDatas = data.phoneDatas,
             $navMenu = $('.J_navMenu'),
             oNav = data.oNav,
             field = $(this).attr('data-field');
        
               if(!oNav.htmlCache[field]){
                     oNav.htmlCache[field] = oNav.navMenu.appendMenuCart(phoneDatas.filter((item) => {
                    return item.field === field;
              }))
               }
        

            $navMenu.html(oNav.htmlCache[field]);
     }
}
export{ Nav };